<template>
	<view class="address">
		<!-- 头部 -->
		<!-- <u-navbar back-icon-color="#000000" title="商家入驻" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar back-text="商家入驻" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- 列表 -->
		<view class="wenxin">
			<image src="../../static/icon/gantan.png" mode=""></image>
			<view>上传清晰无遮挡的资料照片，否则会影响您的审核结果</view>
		</view>
		<view class="shop">

			<view class="names" style="margin-top: 0!important;">公司名称</view>
			<input type="text" v-model="name" />

			<view class="names">经营范围（多选）：</view>
			<view style="display: flex;margin-top: 28rpx;">
				<view v-for="(value,index) in infoArr" :key="index" :data-id="value.id" @tap="tapInfo(value.id)">
					<view class="service" >
						<image :src="value.images" mode="" v-if="businessScope.indexOf(value.id)!=-1"></image>
						<image :src="value.image" mode="" v-else></image>
						<view class="sers" :class="{'cur': businessScope.indexOf(value.id)!=-1}">
							{{value.name}}
						</view>
						<!-- <image src="../../static/icon/duihao.png" mode="" ></image> -->
					</view>
				</view>
			</view>
			<view class="names" style="margin-top: 20rpx!important;">法人姓名：</view>
			<input type="text" v-model="juridicalPerson" />

			<view class="names">身份证号：</view> 
			<input :style="!naClick ? 'border-bottom:4rpx solid #DFDFDF;' : 'border-bottom:4rpx solid #FCA800;'" type="text" v-model="juridicalPersonIdcard" maxlength="18" @focus="focus" @blur="nofocus" />
			<view class="tishi" v-if="juridicalPersonIdcard.length != 18 && naClick==true">
				请输入正确的身份证号格式
			</view>

			<view class="names">联系人姓名：</view>
			<input type="text" v-model="contactsName"  />
			<view class="names">联系人手机：</view>
			<input type="text" :style="!idClick ? 'border-bottom:4rpx solid #DFDFDF;' : 'border-bottom:4rpx solid #FCA800;'" v-model="contactsPhone" maxlength="11"  @focus="idFocus" @blur="noidFocus"  />
			<view class="tishi" v-if="contactsPhone.length != 11 && idClick==true">
				请输入正确的手机号格式
			</view>

			<view class="names">公司地址：</view>
			<view>
				<view style="display: flex;flex-direction: row;align-items:flex-end;padding-left: 48rpx;" @click="this.stieShow=true;">
					<view class="inputTable">{{province}}</view>
					<view class="inputText">省</view>
					<view class="inputTable">{{city}}</view>
					<view class="inputText">市</view>
					<view class="inputTable">{{region}}</view>
					<view class="inputText">区</view>
				</view>

				<textarea class="p-20" placeholder="请输入详细地址" maxlength="50" v-model="address" />
				</view>
			
			<view class="names">
				法人身份证照片：
				<text style="color: #979797;font-size: 24rpx;">请上传身份证正反面照片</text>
			</view>
			<view class="sfzPhoto">
				<image :src="imgFront" mode="aspectFill" @tap="frontCard()"></image>
				<image :src="imgBack" mode="aspectFill" @tap="backCard()"></image>
			</view>
			<view class="sfzPhotos">
				<view class="s_names">
					<view>营业执照：</view>
					<image :src="yyzzPhoto" mode="aspectFill" @tap="yyzz()"></image>
				</view>
				<view class="s_names" style="padding-left: 88rpx;" v-if="businessScope.indexOf(2)!=-1">
					<view>开锁公安备案证明：</view>
					<image :src="beian" mode="aspectFill" @tap="bazm()"></image>
				</view>
			</view>
		</view>
		
		<u-picker mode="region" v-model="stieShow" title="选择公司地址" confirm-color="#FCC800" @confirm="getSite"></u-picker>
				
		<u-toast ref="uToast" />
		<!-- end -->

		<!-- 按钮 -->
		<view :key="counts">
			<button v-if="!isBindPhone" class='bottom' style="background-color: #FCA800;color: #fff;" type='primary'
			 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" withCredentials="true">提交</button>
			 
			 <button v-if="isBindPhone" class='bottom' style="background-color: #FCA800;color: #fff;" type='primary' @click="tijiao()">提交</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				stieShow:false,
				infoArr: [{
						id: 1,
						name: '家政服务',
						image:'../../static/icon/jzfw.png',
						images:'../../static/icon/jzfws.png'
					},
					// {
					// 	id: 2,
					// 	name: '开锁服务',
					// 	image:'../../static/icon/ksfw.png',
					// 	images:'../../static/icon/ksfws.png'
					// },
					{
						id: 3,
						name: '搬家服务',
						image:'../../static/icon/bjfw.png',
						images:'../../static/icon/bjfws.png',
					}
				],
				imgFront: '../../static/icon/1-101.png',
				imgBack: '../../static/icon/1-102.png',
				yyzzPhoto: '../../static/icon/tianjia.png',
				beian: '../../static/icon/tianjia.png',
				
				name:'',//公司名称
				juridicalPerson:'',//代表人名称
				juridicalPersonIdcard:'',//代表人身份证号
				contactsName:'',//联系人姓名
				contactsPhone:'',//联系人手机号
				province:'',//省
				city:'',//市
				region:'',//区
				address:'',//公司地址
				businessScope:[],//经营范围
				juridicalPersonIdcardFrontUrl:'',//身份证正面
				juridicalPersonIdcardBackUrl:'',//身份证反面
				licenseUrl:'',//营业执照
				policeRecord:'',//开锁备案图片
				isBindPhone:false,
				counts:0,
					naClick:false,
					idClick:false
				
			};
		},
		onLoad() {
			this.isBindPhone = uni.getStorageSync('isBindPhone');
		},
		methods: {
			focus(e) {
				this.naClick=true;
			},
			nofocus(e){
				this.naClick=false;
			},
			idFocus(e) {
				this.idClick=true;
			},
			noidFocus(e){
				this.idClick=false;
			},
			tapInfo(e) {
				console.log(e);
				if (this.businessScope.indexOf(e) == -1) {
					this.businessScope.push(e); //选中添加到数组里
				} else {
					this.businessScope.splice(this.businessScope.indexOf(e), 1); //取消
				}
			},
			getSite:function(res){
				this.province=res.province.label;//省
				this.city=res.city.label;//市
				this.region=res.area.label;//区
			},
			frontCard() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						_this.imgFront = res.tempFilePaths[0]
						uni.uploadFile({
						    url: _this.http.baseUrl +'/common/upload',
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						    success: (res) => {
								console.log(res,"==")
								if(res.statusCode == 200){
									_this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
									_this.url= JSON.parse(res.data).data
									_this.juridicalPersonIdcardFrontUrl = _this.url
								}else{
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error',
									})
								}
						    }
						});
					}
				});
			},
			backCard() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res.tempFilePaths[0])
						//   uni.previewImage({
						//     // 对选中的图片进行预览
						//      urls: res.tempFilePaths,
						// })
						_this.imgBack = res.tempFilePaths[0]
						uni.uploadFile({
						    url: _this.http.baseUrl +'/common/upload',
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						    success: (res) => {
								console.log(res,"==")
								if(res.statusCode == 200){
									_this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
									_this.url= JSON.parse(res.data).data
									_this.juridicalPersonIdcardBackUrl = _this.url
								}else{
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error',
									})
								}
						    }
						});
					}
				});
			},
			yyzz() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res.tempFilePaths[0])
						_this.yyzzPhoto = res.tempFilePaths[0]
						uni.uploadFile({
						    url: _this.http.baseUrl +'/common/upload',
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						    success: (res) => {
								console.log(res,"==")
								if(res.statusCode == 200){
									_this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
									_this.url= JSON.parse(res.data).data
									_this.licenseUrl = _this.url
								}else{
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error',
									})
								}
						    }
						});
					}
				});
			},
			bazm() {				
				var _this = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res.tempFilePaths[0])
						_this.beian = res.tempFilePaths[0]
						uni.uploadFile({
						    url: _this.http.baseUrl +'/common/upload',
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						    success: (res) => {
								console.log(res,"==")
								if(res.statusCode == 200){
									_this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
									_this.url= JSON.parse(res.data).data
									_this.policeRecord = _this.url
								}else{
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error',
									})
								}
						    }
						});
					}
				});
			},
			tijiao(){
					let falg=true;
					
					if (!this.name) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入公司名'
						});
						return falg=false;
					}
					
					if (!this.juridicalPerson) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入法人姓名'
						});
						return falg=false;
					}
					
					if (this.businessScope.length==0) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请选择经营范围'
						});
						return falg=false;
					}
					
					if (!this.juridicalPersonIdcard) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入身份证号'
						});
						return falg=false;
					}
					
					if (!this.contactsName) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入联系人姓名'
						});
						return falg=false;
					}
					
					if (!this.contactsPhone) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入联系人手机号'
						});
						return falg=false;
					}
					
					if (!this.province) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请选择省市区'
						});
						return falg=false;
					}
					if(!this.address){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请输入公司详细地址'
						});
						return falg=false;
					}
					if(!this.juridicalPersonIdcardFrontUrl){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请上传身份证正面照片'
						});
						return falg=false;
					}
					if(!this.juridicalPersonIdcardBackUrl){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请上传身份证反面照片'
						});
						return falg=false;
					}
					if(!this.licenseUrl){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请上传营业执照图片'
						});
						return falg=false;
					}
					
					if(this.businessScope.indexOf(2)!=-1&&!this.policeRecord){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请上传开锁备案图片'
						});
						return falg=false;
					}
					
					if(falg){
						let opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: 'user/center/enter'
						};
						let data = {
							name: this.name,
							juridicalPerson: this.juridicalPerson,
							juridicalPersonIdcard:this.juridicalPersonIdcard,
							contactsName:this.contactsName,
							contactsPhone:this.contactsPhone,
							juridicalPersonIdcardFrontUrl:this.juridicalPersonIdcardFrontUrl,
							juridicalPersonIdcardBackUrl:this.juridicalPersonIdcardBackUrl,
							licenseUrl:this.licenseUrl,
							businessScope:this.businessScope.join(','),
							policeRecord:this.policeRecord,
							province:this.province,
							city:this.city,
							region:this.region,
							address:this.address
						};
						
						this.http.httpTokenRequest(opts, data).then(res => {
							if(res.code=="200"){
								console.log(res);
								uni.redirectTo({
									url:'./ruzhu?status=1'
								})
							}else{
								this.$refs.uToast.show({
									title: res.message,
									type: 'error'
								})
							}
						});
					}
					
				
				
				
			},
			//绑定手机号事件
			getPhoneNumber(e) {
				var _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							var code = loginRes.code;
							let opts = {
								way: true, //true JSON请求；false 表单请求
								method: 'post',
								url: 'user/bind/phone'
							};
							let data = {
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								code: code
							};
							_this.http.httpTokenRequest(opts, data).then(res => {
								//打印请求返回的数据
								if (res.code == 200) {
									
									uni.setStorageSync('isBindPhone', true);
									_this.isBindPhone=true;
									_this.tijiao();
									_this.counts+=1;
								} else {
									_this.$refs.uToast.show({
										title: res.message,
										type: 'error'
									})
								}
							});
						}
					});
				} else {
					console.log('用户点击了拒绝');
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.inputTable{
		width: 92rpx;
		text-align: center;
		line-height: 65rpx;
		height: 82rpx;
		background: #FFFFFF;
		border-bottom: 4rpx solid #E4E4E4;
		opacity: 1;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.inputText{
		margin: 0rpx 18rpx 0rpx 18rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3F3F3F;
		opacity: 1;
		padding-right: 64rpx;
	}
	.cur {
		color: #FCA800;
	}

	.shop {
		padding: 18rpx 32rpx 0 32rpx;
	}

	.names , .s_names{
		color: #3F3F3F;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		margin-top: 44rpx;
	}

	.shop input {
		background: #FFFFFF;
		opacity: 1;
		border-bottom: 4rpx solid #DFDFDF;
		padding-top: 15rpx;
	}

	.service {
		// width: 132rpx;
		// border: 2rpx solid #707070;
		// border-radius: 20rpx;
		// padding: 24rpx 18rpx 18rpx 18rpx;
		color: #7A7A7A;
		font-size: 26rpx;
		text-align: center;
		margin-right: 72rpx;
		// position: relative;
	}
	.sers{
		margin-top: 12rpx;
	}

	.service image {
		width: 120rpx;
		height: 120rpx;
	}

	.tishi {
		color: #F86565;
		font-size: 24rpx;
		margin: 20rpx 0 14rpx 10rpx;
	}

	.sfzPhoto,
	.sfzPhotos {
		display: flex;
		justify-content: space-between;
		padding-right: 63rpx;
	}

	.sfzPhoto image {
		width: 272rpx;
		height: 166rpx;
		margin-top: 20rpx;
	}
	.s_names image{
		width: 272rpx;
		height: 166rpx;
		margin-top: 20rpx;
	}

	// .sfzPhotos .names{
	// 	margin: 20rpx 0;
	// }
	.wenxin {
		height: 62rpx;
		font-size: 24rpx;
		color: #F86565;
		line-height: 42rpx;
		display: flex;
		align-items: center;
		background: #FFF4DE;
		padding-left: 28rpx;
	}
	.wenxin image{
		width: 28rpx;
		height: 28rpx;
	}
	.wenxin view{
		padding-left: 12rpx;
	}
	.bottom{
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
	.p-20{
		border: 1px solid #999;
		padding: 14rpx 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 21rpx;
		margin-top: 24rpx;
		height: 184rpx;
	}
</style>
